<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { usePlayerStore } from '@/stores/player'
import { useUserStore } from '@/stores/user'
import { getMusicById } from '@/api/music'
import CoverSection from '@/components/detail/CoverSection.vue'
import InfoSection from '@/components/detail/InfoSection.vue'
import LyricSection from '@/components/detail/LyricSection.vue'
import AddToPlaylistModal from '@/components/PlayList/AddToPlaylistModal.vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const props = defineProps<{
  id?: string  // 可选的 id 参数
}>()

const playerStore = usePlayerStore()
const userStore = useUserStore()

// 控制添加到歌单模态框的显示
const showAddToPlaylistModal = ref(false)

// 计算当前是否已登录
const isLoggedIn = computed(() => userStore.isLoggedIn)

// 处理添加到歌单的点击事件
const handleAddToPlaylist = () => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录')
    return
  }
  showAddToPlaylistModal.value = true
}

// 处理添加成功的回调
const handleAddSuccess = () => {
  ElMessage.success('添加成功')
  showAddToPlaylistModal.value = false
}

// 修改分享相关的函数
const handleShare = async () => {
  // 生成分享链接
  const shareUrl = `${window.location.origin}/detail/${props.id}`
  
  try {
      const textArea = document.createElement('textarea')
      textArea.value = shareUrl
      document.body.appendChild(textArea)
      textArea.select()
      try {
        document.execCommand('copy')
        ElMessage.success('链接已复制到剪贴板')
      } catch (err) {
        ElMessage.error('复制失败，请手动复制链接')
        console.error('复制失败:', err)
      }
      document.body.removeChild(textArea)
  } catch (err) {
    ElMessage.error('复制失败，请手动复制链接')
    console.error('复制失败:', err)
  }
}

onMounted(async () => {
  if (props.id && props.id !== playerStore.currentMusic.id) {
    try {
      const musicDetail = await getMusicById(props.id)
      await playerStore.playMusic(musicDetail)
    } catch (error) {
      console.error('加载音乐详情失败:', error)
    }
  }
})
</script>

<template>
  <div class="song-detail">
    <div class="left-panel">
      <CoverSection :cover="playerStore.currentMusic.cover" />
      <InfoSection 
        :title="playerStore.currentMusic.title" 
        :artist="playerStore.currentMusic.artist" 
        :play-count="playerStore.currentMusic.playCount"
      />
      <div class="actions" v-if="isLoggedIn">
        <button 
          class="add-to-playlist-btn"
          @click="handleAddToPlaylist"
        >
          <i class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 4V20M20 12H4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </i>
          <span>添加到歌单</span>
        </button>
        
        <button 
          class="share-btn"
          @click="handleShare"
        >
          <i class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 5.12548 15.0077 5.24917 15.0227 5.37061L8.08261 9.19071C7.54305 8.46669 6.78899 8 5.93426 8C4.31055 8 3 9.34315 3 11C3 12.6569 4.31055 14 5.93426 14C6.78899 14 7.54305 13.5333 8.08261 12.8093L15.0227 16.6294C15.0077 16.7508 15 16.8745 15 17C15 18.6569 16.3431 20 18 20C19.6569 20 21 18.6569 21 17C21 15.3431 19.6569 14 18 14C17.1453 14 16.3912 14.4667 15.8517 15.1907L8.91165 11.3706C8.92664 11.2492 8.93426 11.1255 8.93426 11C8.93426 10.8745 8.92664 10.7508 8.91165 10.6294L15.8517 6.80929C16.3912 7.53331 17.1453 8 18 8Z"/>
            </svg>
          </i>
          <span>分享</span>
        </button>
      </div>
    </div>
    <div class="right-panel">
      <LyricSection />
    </div>

    <AddToPlaylistModal
      v-model:visible="showAddToPlaylistModal"
      :song-ids="[playerStore.currentMusic.id]"
      @success="handleAddSuccess"
    />
  </div>
</template>

<style scoped lang="scss">
.song-detail {
  display: flex;
  gap: 60px;
  padding: 40px;
  height: calc(100vh - 184px);
  overflow: hidden;
  
  .left-panel {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex-shrink: 0;

    .actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 20px;

      .add-to-playlist-btn,
      .share-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 24px;
        height: 40px;
        border: none;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        
        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 18px;
          height: 18px;

          svg {
            width: 100%;
            height: 100%;
          }
        }
      }

      .add-to-playlist-btn {
        background: linear-gradient(145deg, var(--secondary-color), var(--secondary-color-2));
        color: var(--bgc-color-1);
        
        &:hover {
          background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
          box-shadow: 
            0 4px 12px rgba(var(--secondary-color), 0.4),
            0 0 0 2px rgba(var(--secondary-color), 0.2);
        }
      }

      .share-btn {
        background: linear-gradient(145deg, var(--secondary-color), var(--theme-color));
        color: var(--bgc-color-1);
        
        &:hover {
          background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
          box-shadow: 
            0 4px 12px rgba(var(--theme-color), 0.4),
            0 0 0 2px rgba(var(--theme-color), 0.2);
        }
        
        &:active {
          box-shadow: 
            0 2px 4px rgba(var(--theme-color), 0.2),
            0 0 0 2px rgba(var(--theme-color), 0.2);
        }
      }
    }
  }
  
  .right-panel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
  }
}
</style> 